<template>
	<div>
		<!--饼图-->
		<el-card class="box-card card">
			<template #header>
				<div class="card-header">
					<span>饼图</span>
				</div>
			</template>
			<ECharts ref="pieRef" :option="pieOption" :style="{height: '640px'}"/>
		</el-card>
		<!--玫瑰图-->
		<el-card class="box-card card">
			<template #header>
				<div class="card-header">
					<span>玫瑰图</span>
				</div>
			</template>
			<ECharts ref="roseRef" :option="roseOption" :style="{height: '640px', marginBottom: '20px'}"/>
		</el-card>
		<!--漏斗图-->
		<el-card class="box-card card">
			<template #header>
				<div class="card-header">
					<span>漏斗图</span>
				</div>
			</template>
			<ECharts ref="funnelRef" :option="funnelOption" :style="{height: '640px', marginBottom: '20px'}"/>
		</el-card>
		<!--柱状图-->
		<el-card class="box-card card">
			<template #header>
				<div class="card-header">
					<span>柱状图</span>
				</div>
			</template>
			<ECharts ref="columnarRef" :option="columnarOption" :style="{height: '640px', marginBottom: '20px'}"/>
		</el-card>
	</div>
</template>

<script lang="ts">
import { defineComponent, h, onBeforeMount, ref } from 'vue';
import { createComponent } from 'echarts-for-vue';
import { get } from '@/api/http';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';

interface ChannelMarketing {
	channel: string,
	cnt: number,
	windowEnd?: string
}

interface Advertising {
	province: string,
	windowEnd?: string,
	cnt: number
}

interface PV {
	windowEnd: string,
	cnt: number
}

// interface UV {
// 	windowEnd: number,
// 	cnt: number
// }

interface PieRoseFunnelData {
	value: number,
	name: string
}

export default defineComponent({
	name: 'Charts',
	components: {
		ECharts: createComponent({
			echarts,
			h
		})
	},
	props: {},
	setup () {
		// 饼图ref对象
		const pieRef = ref(null);
		// 饼图数据源
		const pieData = ref([] as PieRoseFunnelData[]);
		// 饼图option
		const pieOption = ref({
			title: {
				text: '市场推广统计',
				subtext: '基于频道',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left'
			},
			series: [{
				name: '市场推广统计',
				type: 'pie',
				radius: '50%',
				data: pieData.value,
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		});

		// 玫瑰图ref对象
		const roseRef = ref(null);
		// 玫瑰图数据源
		const roseData = ref([] as PieRoseFunnelData[]);
		// 玫瑰图option
		const roseOption = ref({
			title: {
				text: '玫瑰图',
				subtext: '广告数据分析'
			},
			legend: {
				top: 'bottom'
			},
			toolbox: {
				show: true,
				feature: {
					mark: { show: true },
					dataView: {
						show: true,
						readOnly: false
					},
					restore: { show: true },
					saveAsImage: { show: true }
				}
			},
			series: [
				{
					name: '广告数据统计',
					type: 'pie',
					radius: [50, 250],
					center: ['50%', '50%'],
					roseType: 'area',
					itemStyle: {
						borderRadius: 8
					},
					data: roseData.value
				}
			]
		});

		// 漏斗图ref对象
		const funnelRef = ref(null);
		// 漏斗图数据源
		const funnelData = ref([] as PieRoseFunnelData[]);
		const funnelLegend = ref([] as string[]);
		// 漏斗图option
		// const funnelOption = ref({
		// 	title: {
		// 		text: '漏斗图',
		// 		subtext: '统计UV'
		// 	},
		// 	tooltip: {
		// 		trigger: 'item',
		// 		formatter: '{a} <br/>{b} : {c}%'
		// 	},
		// 	toolbox: {
		// 		feature: {
		// 			dataView: { readOnly: false },
		// 			restore: {},
		// 			saveAsImage: {}
		// 		}
		// 	},
		// 	legend: {
		// 		data: funnelLegend.value
		// 	},
		// 	series: [
		// 		{
		// 			name: '漏斗图',
		// 			type: 'funnel',
		// 			left: '10%',
		// 			top: 60,
		// 			// x2: 80,
		// 			bottom: 60,
		// 			width: '80%',
		// 			// height: {totalHeight} - y - y2,
		// 			min: 0,
		// 			max: 100,
		// 			minSize: '0%',
		// 			maxSize: '100%',
		// 			sort: 'descending',
		// 			gap: 2,
		// 			label: {
		// 				show: true,
		// 				position: 'inside'
		// 			},
		// 			labelLine: {
		// 				length: 10,
		// 				lineStyle: {
		// 					width: 1,
		// 					type: 'solid'
		// 				}
		// 			},
		// 			itemStyle: {
		// 				borderColor: '#fff',
		// 				borderWidth: 1
		// 			},
		// 			emphasis: {
		// 				label: {
		// 					fontSize: 20
		// 				}
		// 			},
		// 			data: funnelData.value
		// 		}
		// 	]
		// });
		const funnelOption = ref({
			title: {
				text: '漏斗图'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c}%'
			},
			toolbox: {
				feature: {
					dataView: { readOnly: false },
					restore: {},
					saveAsImage: {}
				}
			},
			legend: {
				data: ['PV总量', 'UV总量', '页面统计', '广告数据', '推广统计']
			},

			series: [
				{
					name: '漏斗图',
					type: 'funnel',
					left: '10%',
					top: 60,
					// x2: 80,
					bottom: 60,
					width: '80%',
					// height: {totalHeight} - y - y2,
					min: 0,
					max: 100,
					minSize: '0%',
					maxSize: '100%',
					sort: 'descending',
					gap: 2,
					label: {
						show: true,
						position: 'inside'
					},
					labelLine: {
						length: 10,
						lineStyle: {
							width: 1,
							type: 'solid'
						}
					},
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 1
					},
					emphasis: {
						label: {
							fontSize: 20
						}
					},
					data: [
						{
							value: 100,
							name: 'PV总量'
						},
						{
							value: 80,
							name: 'UV总量'
						},
						{
							value: 60,
							name: '页面统计'
						},
						{
							value: 40,
							name: '广告数据'
						},
						{
							value: 20,
							name: '推广统计'
						}
					]
				}
			]
		});

		// 柱状图ref对象
		const columnarRef = ref(null);
		// 柱状图数据源
		const columnarData = ref([] as number[]);
		const columnarName = ref([] as string[]);
		// 柱状图option
		const columnarOption = ref({
			title: {
				text: '柱状图',
				subtext: '统计PV'
			},
			xAxis: {
				type: 'category',
				data: columnarName.value
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: columnarData.value,
				type: 'bar',
				showBackground: true,
				backgroundStyle: {
					color: 'rgba(180, 180, 180, 0.2)'
				}
			}]
		});

		onBeforeMount(() => {
			// 获取饼图数据
			get('channel-marketing/select/1/10').then(res => {
				const data = res.data.data;
				if (data === null) {
					ElMessage.error('获取饼图数据失败');
					return;
				}
				// 转换饼图数据
				(data.records as ChannelMarketing[]).forEach(record => {
					pieData.value.push({
						value: record.cnt,
						name: record.channel
					});
				});
				// console.log(pieSeriesData);
				ElMessage.success('获取饼图数据成功');
			}).catch(err => {
				ElMessage.error(`获取饼图数据失败, ${err.msg}`);
			});

			// 获取玫瑰图数据源
			get('blacklist-advertising/select/1/10').then(res => {
				const data = res.data.data;
				if (data === null) {
					ElMessage.error('获取玫瑰图数据失败');
					return;
				}
				// 转换玫瑰图数据
				(data.records as Advertising[]).forEach(record => {
					roseData.value.push({
						value: record.cnt,
						name: record.province
					});
				});
				// console.log(roseData.value);
				ElMessage.success('获取玫瑰图数据成功');
			}).catch(err => {
				ElMessage.error(`获取玫瑰图数据失败, ${err.msg}`);
			});

			// 获取柱状图数据源
			get('file-pv/select/1/6').then(res => {
				const data = res.data.data;
				if (data === null) {
					ElMessage.error('获取柱状图数据失败');
					return;
				}
				// 转换柱状图数据
				(data.records as PV[]).forEach(record => {
					columnarData.value.push(record.cnt);
					const nameDate = new Date(record.windowEnd);
					columnarName.value.push(
						`${nameDate.getFullYear().toString().substr(2, 2)}/${(nameDate.getMonth() + 1)}/${nameDate.getDate()} ${nameDate.getHours()}`
					);
				});
				// console.log(roseData.value);
				ElMessage.success('获取柱状图数据成功');
			}).catch(err => {
				ElMessage.error(`获取柱状图数据失败, ${err.msg}`);
			});

			// 获取漏斗图数据源
			// get('set-uv/select/1/5').then(res => {
			// 	const data = res.data.data;
			// 	if (data === null) {
			// 		ElMessage.error('获取漏斗图数据失败');
			// 		return;
			// 	}
			// 	// 转换柱状图数据
			// 	(data.records as UV[]).forEach(record => {
			// 		const name = new Date((record.windowEnd as number) * 1000).toString().substr(0, 10);
			// 		funnelLegend.value.push(name);
			// 		funnelData.value.push({
			// 			value: record.cnt,
			// 			name
			// 		});
			// 	});
			// 	// console.log(roseData.value);
			// 	ElMessage.success('获取漏斗图数据成功');
			// }).catch(err => {
			// 	ElMessage.error(`获取漏斗图数据失败, ${err.msg}`);
			// });
		});

		return {
			// 饼图
			pieRef,
			pieOption,
			pieData,
			// 玫瑰图
			roseRef,
			roseData,
			roseOption,
			// 漏斗图
			funnelRef,
			funnelData,
			funnelLegend,
			funnelOption,
			// 柱状图
			columnarRef,
			columnarData,
			columnarName,
			columnarOption
		};
	}
});
</script>

<style scoped>
.card {
	margin-bottom: 20px;
}
</style>
